<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组件高级用法__内联模板</title>
</head>
<body>

<div id="app">
    <child-component inline-template :message="message">
        <div>
            <h2>在父组件中定义了子组件的模板</h2>
            <p>{{ message }}</p>
            <p>{{ msg }}</p>
        </div>
    </child-component>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     * 组件的模板一般都是在template选项内定义的，Vue提供了一个内联模板的功能，在使用组件时，
     * 给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是把它当做内容分发，使得模板更加灵活。
     *
     * **/
    Vue.component("child-component",{
        props:['message'],
        data:function () {
            return {
                msg:"在子组件声明的数据",
            }
        }
    });

    var app = new Vue({
        el:"#app",
        data:{
            message:"在父组件声明的数据",
        }
    });

    /**
     *在父组件中声明的数据message和子组件中声明的数据msg两个都可以渲染（如果同名则使用子组件的数据）。
     * 这反而是内联模板的缺点，就是作用域比较难以理解，如果不是非常特殊的场景，建议不要轻易使用内联模板。
     * **/




</script>
</body>
</html>
